Ehdollinen tyyppipäättely: 'infer'-avainsanan hallinta TypeScriptissä

TypeScriptin tyyppijärjestelmä tarjoaa tehokkaita työkaluja vankkojen ja ylläpidettävien koodien luomiseen. Näistä työkaluista ehdolliset tyypit erottuvat monipuolisena mekanismina monimutkaisten tyyppisuhteiden ilmaisemiseen. Erityisesti infer-avainsana avaa edistyneitä mahdollisuuksia ehdollisissa tyypeissä, mahdollistaen kehittyneen tyyppien poiminnan ja manipuloinnin. Tämä kattava opas perehtyy infer-avainsanan monimutkaisuuteen tarjoten käytännön esimerkkejä ja oivalluksia, jotka auttavat sinua hallitsemaan sen käytön.

Ehdollisten tyyppien ymmärtäminen

Ennen kuin syvennymme infer-avainsanaan, on tärkeää ymmärtää ehdollisten tyyppien perusteet. Ehdollisten tyyppien avulla voit määrittää tyyppejä, jotka riippuvat ehdosta, samankaltaisesti kuin JavaScriptin ternäärioperaattori. Syntaksi noudattaa tätä kaavaa:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Tässä, jos tyyppi T on yhteensopiva tyypin U kanssa, tuloksena oleva tyyppi on X; muussa tapauksessa se on Y.

Esimerkki:

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Tämä yksinkertainen esimerkki osoittaa, kuinka ehdollisia tyyppejä voidaan käyttää määrittämään, onko tyyppi merkkijono vai ei. Tämä käsite ulottuu monimutkaisempiin skenaarioihin, tasoittaen tietä infer-avainsanalle.

'infer'-avainsanan esittely

infer-avainsanaa käytetään ehdollisen tyypin true-haarassa esittelemään tyyppimuuttuja, joka voidaan päätellä tarkistettavasta tyypistä. Tämä mahdollistaa tyypin tiettyjen osien poimimisen ja niiden käytön tuloksena olevassa tyypissä.

Syntaksi:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

Tässä syntaksissa R on tyyppimuuttuja, joka päätellään tyypin T rakenteesta. Jos T vastaa mallia, R sisältää päätellyn tyypin, ja tuloksena oleva tyyppi on X; muussa tapauksessa se on Y.

Yksinkertaisia esimerkkejä 'infer'-avainsanan käytöstä

1. Funktion palautustyypin päättely

Yleinen käyttötapaus on funktion palautustyypin päättely. Tämä voidaan saavuttaa seuraavalla ehdollisella tyypillä:

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Selitys:

• T extends (...args: any) => any: Tämä rajoitus varmistaa, että T on funktio.
• (...args: any) => infer R: Tämä malli vastaa funktiota ja päättelee palautustyypiksi R.
• R : any: Jos T ei ole funktio, tuloksena oleva tyyppi on any.

Esimerkki:

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Tämä esimerkki osoittaa, kuinka ReturnType onnistuneesti poimii greet- ja calculate-funktioiden palautustyypit.

2. Taulukon alkion tyypin päättely

Toinen yleinen käyttötapaus on taulukon alkion tyypin poimiminen:

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Selitys:

• T extends (infer U)[]: Tämä malli vastaa taulukkoa ja päättelee alkion tyypiksi U.
• U : never: Jos T ei ole taulukko, tuloksena oleva tyyppi on never.

Esimerkki:

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Tämä osoittaa, kuinka ElementType päättelee oikein erilaisten taulukkotyyppien alkion tyypin.

Edistynyt 'infer'-avainsanan käyttö

1. Funktion parametrien päättely

Samoin kuin palautustyypin päättelyssä, voit päätellä funktion parametrit käyttämällä infer-avainsanaa ja tupleja:

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Selitys:

• T extends (...args: any) => any: Tämä rajoitus varmistaa, että T on funktio.
• (...args: infer P) => any: Tämä malli vastaa funktiota ja päättelee parametrien tyypit tuplana P.
• P : never: Jos T ei ole funktio, tuloksena oleva tyyppi on never.

Esimerkki:

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]

            

              
                Copy
              
            
          

Parameters poimii parametrien tyypit tuplana, säilyttäen funktion argumenttien järjestyksen ja tyypit.

2. Ominaisuuksien poimiminen objektityypistä

infer-avainsanaa voidaan käyttää myös tiettyjen ominaisuuksien poimimiseen objektityypistä. Tämä vaatii monimutkaisemman ehdollisen tyypin, mutta se mahdollistaa tehokkaan tyyppien käsittelyn.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Selitys:

• K in keyof T: Tämä iteroi kaikki tyypin T avaimet.
• T[K] extends U ? K : never: Tämä ehdollinen tyyppi tarkistaa, onko avaimen K ominaisuuden tyyppi (eli T[K]) yhteensopiva tyypin U kanssa. Jos se on, avain K sisällytetään tuloksena olevaan tyyppiin; muussa tapauksessa se jätetään pois käyttämällä never-avainsanaa.
• Koko konstruktio luo uuden objektityypin, joka sisältää vain ne ominaisuudet, joiden tyypit laajentavat U:ta.

Esimerkki:

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}


type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType mahdollistaa uuden tyypin luomisen, joka sisältää vain tietyn tyypin ominaisuudet olemassa olevasta tyypistä.

3. Sisäkkäisten tyyppien päättely

infer-avainsanaa voidaan ketjuttaa ja sisäkkäistää tyyppien poimimiseksi syvälle sisäkkäisistä rakenteista. Esimerkiksi, harkitse sisäkkäisen taulukon sisimmän alkion tyypin poimimista.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Selitys:

• T extends (infer U)[]: Tämä tarkistaa, onko T taulukko, ja päättelee alkion tyypiksi U.
• DeepArrayElement<U>: Jos T on taulukko, tyyppi kutsuu rekursiivisesti DeepArrayElement-tyyppiä alkion tyypillä U.
• T: Jos T ei ole taulukko, tyyppi palauttaa T:n itsensä.

Esimerkki:

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Tämä rekursiivinen lähestymistapa mahdollistaa elementin tyypin poimimisen taulukon syvimmältä sisäkkäisyyden tasolta.

Tosielämän sovellukset

infer-avainsana löytää sovelluksia erilaisissa skenaarioissa, joissa tarvitaan dynaamista tyyppien käsittelyä. Tässä on joitakin käytännön esimerkkejä:

1. Tyypiturvallisen tapahtuman lähettäjän luominen

Voit käyttää infer-avainsanaa luodaksesi tyypiturvallisen tapahtuman lähettäjän, joka varmistaa, että tapahtumankäsittelijät vastaanottavat oikean datatyypin.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}


const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Received data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`An error occurred: ${error.message}`);
});

emitter.emit('data', { value: 'Hello, world!' });

emitter.emit('error', { message: 'Something went wrong.' });

            

              
                Copy
              
            
          

Tässä esimerkissä EventData käyttää ehdollisia tyyppejä ja infer-avainsanaa poimiakseen tiettyyn tapahtuman nimeen liittyvän datatyypin, varmistaen, että tapahtumankäsittelijät vastaanottavat oikean datatyypin.

2. Tyypiturvallisen reducerin toteuttaminen

Voit hyödyntää infer-avainsanaa luodaksesi tyypiturvallisen reducer-funktion tilanhallintaan.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Example Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;


// Example State
interface CounterState {
  value: number;
}

// Example Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Usage
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value is 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value is 10

            

              
                Copy
              
            
          

Vaikka tämä esimerkki ei suoraan käytä `infer`-avainsanaa, se luo pohjan monimutkaisemmille reducer-skenaarioille. `infer`-avainsanaa voidaan soveltaa poimimaan dynaamisesti `payload`-tyyppi eri `Action`-tyypeistä, mikä mahdollistaa tiukemman tyyppitarkistuksen reducer-funktiossa. Tämä on erityisen hyödyllistä suuremmissa sovelluksissa, joissa on lukuisia toimintoja ja monimutkaisia tilarakenteita.

3. Dynaaminen tyyppien generointi API-vastauksista

Työskennellessäsi rajapintojen kanssa voit käyttää infer-avainsanaa luodaksesi automaattisesti TypeScript-tyyppejä rajapinnan vastausten rakenteesta. Tämä auttaa varmistamaan tyyppiturvallisuuden vuorovaikutuksessa ulkoisten tietolähteiden kanssa.

Harkitse yksinkertaistettua skenaariota, jossa haluat poimia datatyypin geneerisestä API-vastauksesta:

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Example API Response
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User

            

              
                Copy
              
            
          

ExtractDataType käyttää infer-avainsanaa tyypin U poimimiseen ApiResponse<U>-tyypistä, tarjoten tyypiturvallisen tavan päästä käsiksi rajapinnan palauttamaan datarakenneeseen.

Parhaat käytännöt ja huomioitavaa

• Selkeys ja luettavuus: Käytä kuvaavia tyyppimuuttujien nimiä (esim. ReturnType pelkän R:n sijaan) parantaaksesi koodin luettavuutta.
• Suorituskyky: Vaikka infer on tehokas, liiallinen käyttö voi vaikuttaa tyyppitarkistuksen suorituskykyyn. Käytä sitä harkiten, erityisesti suurissa koodipohjissa.
• Virheiden käsittely: Tarjoa aina varatyyppi (esim. any tai never) ehdollisen tyypin false-haarassa käsitelläksesi tapauksia, joissa tyyppi ei vastaa odotettua mallia.
• Monimutkaisuus: Vältä liian monimutkaisia ehdollisia tyyppejä sisäkkäisillä infer-lauseilla, sillä niistä voi tulla vaikeasti ymmärrettäviä ja ylläpidettäviä. Jaa koodisi pienemmiksi, hallittavammiksi tyypeiksi tarvittaessa.
• Testaus: Testaa ehdolliset tyyppisi perusteellisesti erilaisilla syötekokoonpanoilla varmistaaksesi, että ne käyttäytyvät odotetusti.

Globaalit näkökohdat

Käyttäessäsi TypeScriptiä ja infer-avainsanaa globaalissa kontekstissa, huomioi seuraavat asiat:

• Lokalisointi ja kansainvälistyminen (i18n): Tyyppien on ehkä mukauduttava eri paikallisasetuksiin ja tietomuotoihin. Käytä ehdollisia tyyppejä ja `infer`-avainsanaa käsittelemään dynaamisesti vaihtelevia tietorakenteita paikallisasetuskohtaisten vaatimusten perusteella. Esimerkiksi päivämäärät ja valuutat voidaan esittää eri tavoin eri maissa.
• API-suunnittelu globaalille yleisölle: Suunnittele rajapintasi globaali saavutettavuus mielessä. Käytä johdonmukaisia tietorakenteita ja -muotoja, jotka ovat helposti ymmärrettävissä ja käsiteltävissä käyttäjän sijainnista riippumatta. Tyyppimäärittelyjen tulisi heijastaa tätä johdonmukaisuutta.
• Aikavyöhykkeet: Kun käsittelet päivämääriä ja aikoja, ota huomioon aikavyöhyke-erot. Käytä asianmukaisia kirjastoja (esim. Luxon, date-fns) aikavyöhykemuunnosten käsittelyyn ja varmista tietojen tarkka esitys eri alueilla. Harkitse päivämäärien ja aikojen esittämistä UTC-muodossa API-vastauksissasi.
• Kulttuurierot: Ole tietoinen kulttuurisista eroista tietojen esittämisessä ja tulkinnassa. Esimerkiksi nimillä, osoitteilla ja puhelinnumeroilla voi olla erilaisia muotoja eri maissa. Varmista, että tyyppimäärittelysi voivat mukautua näihin vaihteluihin.
• Valuutan käsittely: Kun käsittelet rahallisia arvoja, käytä johdonmukaista valuuttaesitystä (esim. ISO 4217 -valuuttakoodit) ja käsittele valuuttamuunnoksia asianmukaisesti. Käytä valuutan käsittelyyn suunniteltuja kirjastoja tarkkuusongelmien välttämiseksi ja tarkkojen laskelmien varmistamiseksi.

Esimerkiksi, harkitse skenaariota, jossa haet käyttäjäprofiileja eri alueilta, ja osoitteen muoto vaihtelee maan mukaan. Voit käyttää ehdollisia tyyppejä ja `infer`-avainsanaa säätääksesi tyyppimäärittelyä dynaamisesti käyttäjän sijainnin perusteella:

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Add country code to profile
};

// Example Usage
type USUserProfile = UserProfile<'US'>; // Has US address format
type CAUserProfile = UserProfile<'CA'>; // Has Canadian address format
type GenericUserProfile = UserProfile<'DE'>; // Has Generic (international) address format

            

              
                Copy
              
            
          

Sisällyttämällä `countryCode`-attribuutin `UserProfile`-tyyppiin ja käyttämällä ehdollisia tyyppejä tämän koodin perusteella, voit dynaamisesti säätää `address`-tyyppiä vastaamaan kunkin alueen odotettua muotoa. Tämä mahdollistaa erilaisten tietorakenteiden tyypiturvallisen käsittelyn eri maissa.

Yhteenveto

infer-avainsana on tehokas lisäys TypeScriptin tyyppijärjestelmään, mahdollistaen kehittyneen tyyppien manipuloinnin ja poiminnan ehdollisissa tyypeissä. Hallitsemalla infer-avainsanan voit luoda vankempaa, tyypiturvallisempaa ja ylläpidettävämpää koodia. Mahdollisuudet ovat laajat aina funktion palautustyyppien päättelystä monimutkaisten objektien ominaisuuksien poimimiseen. Muista käyttää infer-avainsanaa harkiten, painottaen selkeyttä ja luettavuutta varmistaaksesi, että koodisi pysyy ymmärrettävänä ja ylläpidettävänä pitkällä aikavälillä.

Tämä opas on antanut kattavan yleiskatsauksen infer-avainsanasta ja sen sovelluksista. Kokeile annettuja esimerkkejä, tutki lisää käyttötapauksia ja hyödynnä infer-avainsanaa parantaaksesi TypeScript-kehitystyötäsi.